// 样式私有化处理  styled-components

// 路由接受参数
import React from "react";
import styled from "styled-components";
import {CommonListBox, titleSize, colorRed} from "./common"
import {withRouter} from "react-router-dom";
import qs from "qs";

/* 编写组件的样式： 基于 css-in-js 思想中的 styled-components 插件 */
const MenuBox = styled.div`
  background: lightblue;
  width: 400px;

  .title {
    font-size: ${titleSize}px;
    line-height: 40px;

    &:hover {
      color: ${colorRed}
    }
  }
`

class Menu extends React.Component {
    render() {
        console.log(this.props)
        // 方式1：问号传参的接受
        // const {location} = this.props
        //
        // // 获取传递的问号参数信息
        // // let query = qs.parse(location.search.slice(1))
        // // console.log(query,9)
        //
        // // 也可以基于 URLSearchParams
        // let usp = new URLSearchParams(location.search)
        // console.log(usp.get("id"), usp)

        // 方式2：路径传参的接受
        // const {match} = this.props
        // console.log(match.params)

        // 方式3：隐式传参的接受
        const {location} = this.props
        console.log(location.state)


        return <MenuBox>
            <CommonListBox>
                <li>手机c</li>
                <li>电脑c</li>
                <li>家电c</li>
            </CommonListBox>
        </MenuBox>;
    }
};


export default withRouter(Menu);